<template>
	<view class="tabs">
		<view class="tabs-pane" v-for="(tab, index) in  tabList" :key="index" @click="tabClick(tab, index)"  :class="{
			'is-active': tab.value == currTab
		}">
			{{tab.label}}
		</view>
	</view>

</template>

 <script>
	export default {
		props: {
			tabList: Array,
			currTab: String
		},
		methods: {
			tabClick(tab, index) {
				this.$emit('click', tab)
			}
		}
	}
</script>

<style lang="scss">
$tab-color-primary: $uni-color-primary;
$tab-height: 60upx;
.tabs {
	display: flex;
	height: $tab-height;
	line-height: $tab-height;
	border: 1px solid $tab-color-primary;
	border-radius: 10upx;
	margin: 0 5upx;	
	background: #fff;
	&-pane {
		width: 50%;
		font-size: 32upx;
		// padding: 8upx;
		text-align: center;
		color: $tab-color-primary;
	}
	.is-active {
		color: #fff;
		background: $tab-color-primary;
	}
}
</style>
